<template>
  <el-dialog
    title="编辑"
    :visible.sync="visible"
    :show-close="false"
    width="900px"
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal">
      <i class="el-dialog__close el-icon el-icon-close"></i>
    </button>
    <el-form
      class="form-wrapper"
      ref="orderForm"
      :model="orderForm"
      :rules="addRules"
      label-width="110px"
    >
      <el-row>
        
        <el-col :span="8">
          <el-form-item label="单据编号">
          <el-input
          :disabled="true"
          style="width:180px;"
            v-model="orderForm.djbh"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="日期">
          <el-date-picker
           :disabled="true"
          style="width:180px;"
            value-format="yyyy-MM-dd"
            v-model="orderForm.rq"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="原单据号">
          <el-input
           :disabled="true"
          style="width:180px;"
            v-model="orderForm.ydjh"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        </el-col>
      </el-row>
       <el-row>
      <el-col :span="8">
          <el-form-item label="渠道" prop="qddm">
          <el-select style="width:180px;" v-model="orderForm.qddm" @change="qdchange" clearable placeholder="请选择">
              <el-option
              v-for="item in qdlist"
              :key="item.code"
              :label="item.name+'['+ item.code +']'"
              :value="item.code"
            >
            </el-option>
        </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="门店/客户" prop="khdm">
         <el-select :disabled="!orderForm.qddm" style="width:180px;" v-model="orderForm.khdm" clearable  placeholder="请选择">
              <el-option
              v-for="item in khlist"
              :key="item.code"
              :label="item.name+'['+ item.code +']'"
              :value="item.code"
            >
            </el-option>
        </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
        <el-form-item label="收款类型" prop="sklxDm">
          <el-select  style="width:180px;" v-model="orderForm.sklxDm" clearable placeholder="请选择">
                  <el-option
                  v-for="item in sklxlist"
                  :key="item.code"
                  :label="item.name+'['+ item.code +']'"
                  :value="item.code"
                >
                </el-option>
        </el-select>
        </el-form-item>
        </el-col>
      </el-row>
       <el-row>
      <el-col :span="8">
           <el-form-item label="订货会" prop="dhhdm">
          <el-select style="width:180px;" v-model="orderForm.dhhdm" clearable placeholder="请选择">
               <el-option
                  v-for="item in dhhlist"
                  :key="item.code"
                  :label="item.name+'['+ item.code +']'"
                  :value="item.code"
                >
                </el-option>
        </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="分账信息" prop="fzxx">
          <el-select style="width:180px;" v-model="orderForm.fzxx" clearable placeholder="请选择">
               <el-option
                  v-for="item in fzxxlist"
                  :key="item.code"
                  :label="item.name+'['+ item.code +']'"
                  :value="item.code"
                >
                </el-option>
        </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="单据状态" prop="status">
          <el-select style="width:180px;"  :disabled="true" v-model="orderForm.status" clearable placeholder="请选择">
            <el-option
              v-for="item in orderstatuslist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
      <el-col :span="8">
        <el-form-item label="" prop="ysdjh">
          <!-- getysdjhlistlist -->
           
          <!-- <el-select v-model="orderForm.ysdjh" @change="ysdjhChange" placeholder="请选择">
            <el-option
              v-for="item in tableDataysdjh"
              :key="item.djbh"
              :label="item.djbh"
              :value="item.djbh">
              <span style="font-size:12px;">{{ item.djbh }}</span>
              <span style="font-size:12px;margin-left:8px">{{ item.qddmInfo.name }}</span>
              <span style="font-size:12px;margin-left:8px">{{ item.khdmInfo.name }}</span>
              <span style="font-size:12px;margin-left:8px">应收金额：{{ item.je }}</span>
            </el-option>
          </el-select> -->
            <!-- <el-input
              @focus="ysdchange"
              style="width:180px;"
              v-model="orderForm.ysdjh"
              placeholder="请输入"
              clearable
            ></el-input> -->
        </el-form-item>
      </el-col>
      </el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="详细信息" name="first">
          <!-- djbh -->
          <el-button type="primary" @click="getysdjhlistlist">获取</el-button>
           <!-- <div><el-button type="primary" @click="newadd('1')">新增</el-button></div> -->
          <el-table
          :data="tableDatadetail"
          style="width: 100%">
           <el-table-column
           label="编号"
          type="index"
          width="50">
          </el-table-column>
          <el-table-column
            prop="sqdjh"
            label="收取单号"
            min-width="120"
            >
             <template slot-scope="scope">{{scope.row.sqdjh}}</template>
          </el-table-column>
          <el-table-column
            prop="je"
            label="定金金额"
            >
             <template slot-scope="scope">{{scope.row.je|NumberSet}}</template>
          </el-table-column>
          <el-table-column
            prop="kyje"
            label="可用金额"
            >
             <template slot-scope="scope">{{scope.row.kyje|NumberSet}}</template>
          </el-table-column>
          <el-table-column
            prop="syje"
            label="使用金额">
             <template slot-scope="scope">{{scope.row.syje|NumberSet}}</template>
          </el-table-column>
          <el-table-column
            prop="bcye"
            label="本次余额">
             <template slot-scope="scope">{{scope.row.bcye|NumberSet}}</template>
          </el-table-column>
          <el-table-column
            prop="bz"
            label="摘要">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-button
               type="text"
               size="mini"
               @click="toedit('2',scope.row)">编辑</el-button>
               <el-button
               type="text"
               size="mini"
               @click="deletehander(scope.row)">删除</el-button>
                </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: flex-end">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :total="detaildata.total"
        ></el-pagination>
      </div>
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="second"><el-row>
          <el-col :span="12">
            <el-form-item label="创建人：">
                <el-input style="width:180px;" v-model="orderForm.zdr" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间：">
                <el-input style="width:180px;" v-model="orderForm.zdrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="修改人：">
                <el-input style="width:180px;" v-model="orderForm.xgr" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="修改时间：">
                <el-input style="width:180px;" v-model="orderForm.xgrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="提交人：">
                <el-input style="width:180px;" v-model="orderForm.tjr" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="提交时间：">
                <el-input style="width:180px;" v-model="orderForm.tjrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="审核人：">
                <el-input style="width:180px;" v-model="orderForm.checker" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="审核时间：">
                <el-input style="width:180px;" v-model="orderForm.shrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="终止人：">
                <el-input style="width:180px;" v-model="orderForm.zzr" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="终止时间：">
                <el-input style="width:180px;" v-model="orderForm.zzrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row></el-tab-pane>
      </el-tabs>
      <div style="margin:10px;"></div>
      
    </el-form>
    <div slot="footer" class="buttons-wrap">
      <el-button type="primary" @click="submitForm('orderForm')">保存</el-button>
    </div>
    <el-dialog
      :title="diatitle"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body>
      <el-form label-position="right" label-width="80px" :model="formLabelAlign">
      <el-form-item label="收取单号">
        <el-input :disabled="addoedit == '2'" v-model="formLabelAlign.sqdjh"></el-input>
      </el-form-item>
      <el-form-item label="定金金额">
        <el-input :disabled="true" v-model.number="formLabelAlign.je"  type="number"></el-input>
      </el-form-item>
      <el-form-item label="可用金额">
        <el-input  :disabled="true" v-model.number="formLabelAlign.kyje" type="number"></el-input>
      </el-form-item>
       <el-form-item label="使用金额">
        <el-input   v-model.number="formLabelAlign.syje" @change="syjechange" type="number"></el-input>
      </el-form-item>
       <el-form-item label="本次余额">
        <el-input  :disabled="true" v-model.number="formLabelAlign.bcye" type="number"></el-input>
      </el-form-item>
      <el-form-item label="摘要">
        <el-input v-model="formLabelAlign.bz"></el-input>
      </el-form-item>
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toinsert(1,'')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="定金收取单"
      :visible.sync="dialogysdjh"
      width="45%"
      append-to-body>
       <el-table
      :data="tableDataysdjh"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        min-width="120"
        prop="djbh"
        label="收取单号"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="渠道"
        >
        <template slot-scope="scope">{{scope.row.qddmInfo.name}}</template>
          <!--  -->
      </el-table-column>
      <el-table-column
        prop="address"
        label="门店/客户">
      <template slot-scope="scope">{{scope.row.khdmInfo.name}}</template>
      </el-table-column>
       <el-table-column
        prop="je"
        label="应收金额">
      </el-table-column>
    </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogysdjh = false">取 消</el-button>
        <el-button type="primary" @click="getdetailistsub">确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>
<script>
import { debounce } from "@/utils/sunny"
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editdata: {
      type: Object
    }
  },
  data() {
    return {
      debounce:debounce,
      diatitle:'新增',
      user: JSON.parse(window.sessionStorage.getItem("user")),
      checkboxvalue: this.editdata.xtmr == "1" ? true : false,
      orderForm: JSON.parse(JSON.stringify(this.editdata)),
      addRules: {
       qddm: [{ required: true, message: "请选择渠道", trigger: 'change'}],
          khdm:[{ required: true, message: "请选择门店或客户", trigger: 'change'}],
          sklxDm:[{ required: true, message: "请选择收款类型", trigger: 'change'}],
          dhhdm:[{ required: true, message: "请选择订货会", trigger: 'change'}],
          fzxx:[{ required: true, message: "请选择分账信息", trigger: 'change'}],
      },
       orderstatuslist: [
        { value: '0', label: "初始" },
        { value: '1', label: "提交" },
        { value: '2', label: "审核" },
        { value: '3', label: "终止" }
      ],
      qdlist:[],
      khlist:[],
      sklxlist:[],
      dhhlist:[],
      fzxxlist:[],
      ysdjhlist:[],
      activeName:'first',
      tableDatadetail:[],
      detaildata:{
        page:1,
        size:10,
        total:0
      },
      dialogVisible:false,
      dialogysdjh:false,
      formLabelAlign:{
        je:'',//应收金额
        ycje:'',//一充金额
        wcje:'',//未冲金额
        bz:'',//摘要
        djbh:''
      },
      addoedit:'',
      editrow:{},
      tableDataysdjh:[],
      selectiondata:[]
    };
  },
  created(){
    this.getlistQdlist();
    this.getlistsklxlist();
    this.getlistdhhlist();
    this.getlistfzxxlist();
    this.getdetaillist();
    if(this.orderForm.qddm){
      this.firstgetmdkelsit(this.orderForm.qddm)
    }
    // this.getysdjhlistlist()
  },
  methods: {
    syjechange(e){
      //可用金额 只读,=收取单明细.已冲金额-收取单明细.已用金额			
      if(e > this.formLabelAlign.kyje){
          this.formLabelAlign.syje = this.formLabelAlign.kyje
      }
      this.formLabelAlign.bcye = this.formLabelAlign.kyje - this.formLabelAlign.syje
    },
    getdetailistsub(){
      // 
      this.dialogysdjh = false
      let data = this.selectiondata.map(item => {
        return item.djbh
      })
      this.ysdjhChange(data)
    },
    handleSelectionChange(val){
      this.selectiondata = val
      console.log(val,'33333222')
    },
    ycjechange(e){
      if(e>this.formLabelAlign.je){
          this.formLabelAlign.ycje = ''
          this.formLabelAlign.wcje = ''
          this.$message({
          message: '已充金额不能大于应收金额！',
          type: 'warning'
        });
        return
      }else{
        this.formLabelAlign.wcje = this.formLabelAlign.je - e
      }
    },
    ysdjhChange(e){
      // 应收单号变化时  去根据 djbh  到应收单 查询出对应的明细 插入到列表  如果变化 就先调用清空 接口 然后再去调用查询 重新插入
      //先条用清空接口
      if(this.tableDatadetail.length){
        // 如果有明细则去调用清空口 没有直接去调用查询接口   /detail//
           this.deleteRequest('/earnestmoney/djsyd/detail/deleteAll/'+this.orderForm.djbh).then(res =>{
             if (res) {
                  this.tableDatadetail = []
                  this.getdetaillsit(e)
                }
         })
      }else{
          this.getdetaillsit(e)
        }
    },
    // 查询明细 
    getdetaillsit(e){
      let data = e
      // /earnestmoney/djsqd/detail/queryByDjbhList
      this.postRequest(
        "/earnestmoney/djsqd/detail/queryByDjbhList",e).then(res => {
        if (res) {
            // /detail/insertAll  数据多条插入 
              console.log(res,'查看数据1。。。')
         let testlist =   res.data.map(item =>{
                let testdata = {
                    sqdjh:item.djbh,
                    djbh:this.orderForm.djbh,
                    je:item.je,
                    kyje:item.ycje - item.yyje
                }
                return testdata
            })
            
            console.log(testlist,'查看数据2。。。')
            this.insertAll(testlist)
        }
      });
    },
    // 做批量新增  detail/insertAll
    insertAll(e){
      this.postRequest(
            "/earnestmoney/djsyd/detail/insertAll",e).then(res => {
            if (res) {
                this.getdetaillist()
                // this.dialogVisible = false
            }
          });
    },
    ysdchange(){
      this.dialogysdjh = true
    },
    // ysdjhlist 获取定金预售单 列表 
      getysdjhlistlist(){
        this.dialogysdjh = true
          let data = {
            qddm:this.orderForm.qddm,
            khdm:this.orderForm.khdm,
            sklxDm:this.orderForm.sklxDm,
            dhhdm:this.orderForm.dhhdm,
            fzxx:this.orderForm.fzxx,
            page:1,
            size:1000,
          }
          this.getRequest(
          "earnestmoney/djsqd/queryDjsqd?" +this.tool.pars(data)
        ).then(res => {
          if (res) {
            // 差到数据以后 去做处理 进行保存
            // let testlist =   res.data.map(item =>{
            //     let testdata = {
            //         djbh:this.orderForm.djbh,
            //         je:item.je,
            //         kyje:item.ycje - item.yyje
            //     }
            //     return testdata
            // })
            
            // console.log(testlist,'查看数据。。。')
            // this.insertAll(testlist)
            this.tableDataysdjh = res.data;
            console.log(res.data,'33333333333')
          }
        });
      },
      // 获取渠道列表
      getlistQdlist(){
          this.getRequest(
          "/common/getqd?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.qdlist = res.data;
            console.log(res.data)
          }
        });
      },
      // 首次进入是加载 门店客户列表 
      firstgetmdkelsit(e){
        this.getRequest(
          "/common/getmd?&page=1&size=100&qddm="+this.orderForm.qddm
        ).then(res => {
          if (res) {
            this.khlist = res.data;
            console.log(res.data)
          }
        });
      },
      //  获取门店客户 
      qdchange(e){
        this.orderForm.khdm = ''
          this.getRequest(
          "/common/getmd?&page=1&size=100&qddm="+this.orderForm.qddm
        ).then(res => {
          if (res) {
            this.khlist = res.data;
            console.log(res.data)
          }
        });
      },
      // sklxlist  首款类型
      getlistsklxlist(){
          this.getRequest(
          "/earnestmoney/sklx/query?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.sklxlist = res.data;
            console.log(res.data)
          }
        });
      },
     //  订货会
       getlistdhhlist(){
          this.getRequest(
          "/earnestmoney/dhh/query?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.dhhlist = res.data;
            console.log(res.data)
          }
        });
      },
      // 分账信息  getfzxx
      getlistfzxxlist(){
          this.getRequest(
          "/common/getfzxx?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.fzxxlist = res.data;
            console.log(res.data)
          }
        });
      },
        deletehander:debounce(function(e){
        this.$confirm('确认删除本条信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/earnestmoney/djsyd/detail/delete/'+e.mxbh).then(res =>{
             if (res.status == "200") {
                this.getdetaillist();
                }
         })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        console.log(e)
      }),
      toedit(e,row){
        this.dialogVisible = true
        this.addoedit = e
        this.editrow = JSON.parse(JSON.stringify(row))
        this.formLabelAlign =  this.editrow
        // this.formLabelAlign.je = this.editrow.je,//应收金额
        // this.formLabelAlign.ycje = this.editrow.ycje,//已充金额
        // this.formLabelAlign.wcje = this.editrow.wcje,//未冲金额
        // this.formLabelAlign.bz = this.editrow.bz,//摘要
        // this.formLabelAlign.djbh = this.editrow.djbh,//摘要
        this.diatitle = "编辑"
      },
      newadd(e){
      this.dialogVisible = true
      this.addoedit = e
      this.diatitle = "新增"
      this.formLabelAlign.je = '',//定金金额
      this.formLabelAlign.sqdjh = '222222222',//收取单号
      this.formLabelAlign.kyje = '',//k可用金额
      this.formLabelAlign.syje = '',//使用金额
      this.formLabelAlign.bcye = '',//使用金额
      this.formLabelAlign.bz = ''//摘要
      },
      toinsert(){
        if(this.addoedit == '1'){
          // 1 新增
          this.formLabelAlign.djbh = this.orderForm.djbh
          this.postRequest(
            "/earnestmoney/djsyd/detail/insert",this.formLabelAlign).then(res => {
            if (res) {
                this.getdetaillist()
                this.dialogVisible = false
            }
          });
        }else if(this.addoedit == '2'){
          //2 编辑
          this.postRequest(
            "/earnestmoney/djsyd/detail/update",this.formLabelAlign).then(res => {
            if (res) {
                this.getdetaillist()
                this.dialogVisible = false
            }
          });
        }
        
       
      },
    
    getdetaillist(){
      console.log(this.tool.pars(this.detaildata))
       this.detaildata.djbh = this.orderForm.djbh
      this.getRequest(
        "/earnestmoney/djsyd/detail/query?" +this.tool.pars(this.detaildata)).then(res => {
        if (res) {
          this.tableDatadetail = res.data;
          this.detaildata.total = res.total;
        }
      });
    },
    sizeChange(size) {
      this.detaildata.size = size;
      this.getdetaillist();
    },
    currentChange(page) {
      this.detaildata.page = page;
      this.getdetaillist();
    },
    initForm() {
      this.orderForm = {
        code: "",
        name: "",
        xtmr: "",
        status: "1",
        zdr: "",
        qyr: ""
      };
      if (this.$refs.orderForm) {
        this.$refs.orderForm.resetFields();
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.orderForm);
          this.orderForm.xgr = this.user.name;
          this.postRequest("/earnestmoney/djsyd/update", this.orderForm).then(
            res => {
              console.log(res, "11111");
              if (res.status == "200") {
                this.$parent.getdata();
                this.$emit("update:visible", false);
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelModal() {
      // 关闭弹窗，触发父组件修改visible值
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.buttons-wrap {
  .el-button {
    margin-right: 20px;
    min-width: 100px;
  }
}
</style>